{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_14\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_14\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_14\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "            // FIXME: Stop all previously running versions (?)\n",
       "            var processingInstance = Processing.getInstanceById(\"canvas_14\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "\n",
       "\n",
       "        var output_area = this;\n",
       "        // find my cell element\n",
       "        var cell_element = output_area.element.parents('.cell');\n",
       "        // which cell is it?\n",
       "        var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
       "        // get the cell object\n",
       "        var cell = Jupyter.notebook.get_cell(cell_idx);\n",
       "\n",
       "        function jyp_print(cell, newline) {\n",
       "            return function(message) {\n",
       "                cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n",
       "                                                   content: {text: message + newline,\n",
       "                                                             name: \"stdout\"}});\n",
       "            }\n",
       "        }\n",
       "        window.jyp_println = jyp_print(cell, \"\\n\");\n",
       "        window.jyp_print = jyp_print(cell, \"\");\n",
       "\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "           Processing.logger.println = jyp_print(cell, \"\\n\");\n",
       "           Processing.logger.print = jyp_print(cell, \"\");\n",
       "        });\n",
       "\n",
       "\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_14\">\n",
       "  <b>Sketch #14:</b><br/>\n",
       "  <canvas id=\"canvas_14\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_14\">\n",
       "  <button id=\"run_button_14\" onclick=\"startSketch('14');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_14\" onclick=\"pauseSketch('14');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_14\" onclick=\"setupSketch('14');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_14\" onclick=\"drawSketch('14');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #14 state:</b> <span id=\"state_14\">Loading...</span><br/>\n",
       "<script>\n",
       "\n",
       "function change_button(button, disable) {\n",
       "    button.disabled = disable;\n",
       "    if (disable) {\n",
       "        button.style.color = \"grey\";\n",
       "    } else {\n",
       "        button.style.color = \"black\";\n",
       "    }\n",
       "}\n",
       "\n",
       "function startSketch(id) {\n",
       "    switchSketchState(id, true);\n",
       "}\n",
       "\n",
       "function pauseSketch(id) {\n",
       "    switchSketchState(id, false);\n",
       "}\n",
       "\n",
       "function drawSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Drawing...\";\n",
       "            try {\n",
       "                processingInstance.redraw();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Drawing... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No drawing() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function setupSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.setup != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Setting up...\";\n",
       "            try {\n",
       "                processingInstance.setup();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Setting up... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No setup() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function switchSketchState(id, on) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (on) {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Running...\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"green\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id),  true);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), true);\n",
       "        processingInstance.loop();  // call Processing loop() function\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Paused.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "        processingInstance.noLoop(); // stop animation, call noLoop()\n",
       "    }\n",
       "}\n",
       "\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = 'void drawFish(int x, int y, float scale) {\\n    // fish tail\\n    fill(random(255), random(255), random(255));\\n    noStroke();\\n    //stroke(0);\\n    //strokeWeight(1);\\n    triangle(x, y,\\n            x + scale * 4, y + scale * 3,\\n            x, y + scale * 6);\\n    // fish body\\n    //fill(random(255), random(255), random(255));\\n    float centerOfBodyX = x + scale * 8;\\n    float centerOfBodyY = y + scale * 2;\\n    ellipse(centerOfBodyX, centerOfBodyY, 9 * scale, 7 * scale);\\n    // fish eye\\n    fill(0);\\n    ellipse(centerOfBodyX + scale * 3, centerOfBodyY + scale * -1, .5 * scale, .5 * scale);\\n    \\n    drawBubble(x + scale * 16, y + scale * 3, scale);\\n    drawBubble(x + scale * 20, y, scale * 2.0);\\n}\\n\\nvoid drawBubble(float x, float y, float scale) {\\n    fill(204, 255, 255, 128);\\n    noStroke();\\n    ellipse(x, y, 3 * scale, 3 * scale);\\n}\\n\\nvoid drawOcean() {\\n    background(0);\\n    fill(109, 219, 236);\\n    noStroke();\\n    rect(0, 0, 500, 500);\\n    // hook 1\\n    stroke(166, 192, 192);\\n    strokeWeight(4);\\n    arc(101, 65, 50, 70, 0, PI/2);\\n    line(100, 0, 100, 100);\\n    // hook 2\\n    arc(339, 165, 50, 70, PI/2, PI);\\n    line(340, 0, 340, 200);\\n    // hook 3\\n    arc(291, 350, 50, 70, 0, PI/2);\\n    line(290, 0, 290, 385);\\n}\\n\\nvoid setup(){\\n    size(500,500);\\n}\\n\\nvoid draw(){\\n    drawOcean();\\n    // For loop:\\n    for (int i = 0; i < 20; i++) {\\n        drawFish(int(random(500)), int(random(500)), 2 + random(3));\\n    }\\n    \\n    // While loop:\\n    int i = 0;\\n    while (i < 20) {\\n        drawFish(int(random(500)), int(random(500)), 2 + random(3));\\n        i++;\\n    }\\n    \\n    /*\\n    for(INIT; TEST; UPDATE) {\\n        ...\\n    }\\n\\n    INIT;\\n    while (TEST) {\\n        ...\\n        UPDATE;\\n    }\\n    */\\n    noLoop();\\n}';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\n",
       "\n",
       "    try {\n",
       "        cc = Processing.compile(processingCode);\n",
       "    } catch (e) {\n",
       "        console.log(e);\n",
       "        cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "        document.getElementById(\"state_14\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_14\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_14\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_14\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_14\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_14\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_14\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_14\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_14\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_14\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_14\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_14\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_14\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_14\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_14\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_14\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_14\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_14\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_14\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_14\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_14\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_14\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_14\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_14\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_14\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_14\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_14\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_14\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "void drawFish(int x, int y, float scale) {\n",
    "    // fish tail\n",
    "    fill(random(255), random(255), random(255));\n",
    "    noStroke();\n",
    "    //stroke(0);\n",
    "    //strokeWeight(1);\n",
    "    triangle(x, y,\n",
    "            x + scale * 4, y + scale * 3,\n",
    "            x, y + scale * 6);\n",
    "    // fish body\n",
    "    //fill(random(255), random(255), random(255));\n",
    "    float centerOfBodyX = x + scale * 8;\n",
    "    float centerOfBodyY = y + scale * 2;\n",
    "    ellipse(centerOfBodyX, centerOfBodyY, 9 * scale, 7 * scale);\n",
    "    // fish eye\n",
    "    fill(0);\n",
    "    ellipse(centerOfBodyX + scale * 3, centerOfBodyY + scale * -1, .5 * scale, .5 * scale);\n",
    "    \n",
    "    drawBubble(x + scale * 16, y + scale * 3, scale);\n",
    "    drawBubble(x + scale * 20, y, scale * 2.0);\n",
    "}\n",
    "\n",
    "void drawBubble(float x, float y, float scale) {\n",
    "    fill(204, 255, 255, 128);\n",
    "    noStroke();\n",
    "    ellipse(x, y, 3 * scale, 3 * scale);\n",
    "}\n",
    "\n",
    "void drawOcean() {\n",
    "    background(0);\n",
    "    fill(109, 219, 236);\n",
    "    noStroke();\n",
    "    rect(0, 0, 500, 500);\n",
    "    // hook 1\n",
    "    stroke(166, 192, 192);\n",
    "    strokeWeight(4);\n",
    "    arc(101, 65, 50, 70, 0, PI/2);\n",
    "    line(100, 0, 100, 100);\n",
    "    // hook 2\n",
    "    arc(339, 165, 50, 70, PI/2, PI);\n",
    "    line(340, 0, 340, 200);\n",
    "    // hook 3\n",
    "    arc(291, 350, 50, 70, 0, PI/2);\n",
    "    line(290, 0, 290, 385);\n",
    "}\n",
    "\n",
    "void setup(){\n",
    "    size(500,500);\n",
    "}\n",
    "\n",
    "void draw(){\n",
    "    drawOcean();\n",
    "    // For loop:\n",
    "    for (int i = 0; i < 20; i++) {\n",
    "        drawFish(int(random(500)), int(random(500)), 2 + random(3));\n",
    "    }\n",
    "    \n",
    "    // While loop:\n",
    "    int i = 0;\n",
    "    while (i < 20) {\n",
    "        drawFish(int(random(500)), int(random(500)), 2 + random(3));\n",
    "        i++;\n",
    "    }\n",
    "    \n",
    "    /*\n",
    "    for(INIT; TEST; UPDATE) {\n",
    "        ...\n",
    "    }\n",
    "\n",
    "    INIT;\n",
    "    while (TEST) {\n",
    "        ...\n",
    "        UPDATE;\n",
    "    }\n",
    "    */\n",
    "    noLoop();\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "        var component = document.getElementById(\"sketch_19\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"state_19\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        component = document.getElementById(\"controls_div_19\");\n",
       "        if (component != undefined)\n",
       "            component.remove();\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "            // FIXME: Stop all previously running versions (?)\n",
       "            var processingInstance = Processing.getInstanceById(\"canvas_19\");\n",
       "            if (processingInstance != undefined && processingInstance.isRunning())\n",
       "                processingInstance.noLoop();\n",
       "        });\n",
       "\n",
       "\n",
       "        var output_area = this;\n",
       "        // find my cell element\n",
       "        var cell_element = output_area.element.parents('.cell');\n",
       "        // which cell is it?\n",
       "        var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
       "        // get the cell object\n",
       "        var cell = Jupyter.notebook.get_cell(cell_idx);\n",
       "\n",
       "        function jyp_print(cell, newline) {\n",
       "            return function(message) {\n",
       "                cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n",
       "                                                   content: {text: message + newline,\n",
       "                                                             name: \"stdout\"}});\n",
       "            }\n",
       "        }\n",
       "        window.jyp_println = jyp_print(cell, \"\\n\");\n",
       "        window.jyp_print = jyp_print(cell, \"\");\n",
       "\n",
       "        require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n",
       "           Processing.logger.println = jyp_print(cell, \"\\n\");\n",
       "           Processing.logger.print = jyp_print(cell, \"\");\n",
       "        });\n",
       "\n",
       "\n",
       "        "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<div id=\"canvas_div_19\">\n",
       "  <b>Sketch #19:</b><br/>\n",
       "  <canvas id=\"canvas_19\"></canvas><br/>\n",
       "</div>\n",
       "<div id=\"controls_div_19\">\n",
       "  <button id=\"run_button_19\" onclick=\"startSketch('19');\">\n",
       "    <i class=\"fa fa-play-circle-o\" style=\"size: 2em;\"></i>\n",
       "        Run\n",
       "  </button>\n",
       "  <button id=\"pause_button_19\" onclick=\"pauseSketch('19');\">\n",
       "    <i class=\"fa fa-pause\" style=\"size: 2em;\"></i>\n",
       "        Pause\n",
       "  </button>\n",
       "  <button id=\"setup_button_19\" onclick=\"setupSketch('19');\">\n",
       "    setup()\n",
       "  </button>\n",
       "  <button id=\"draw_button_19\" onclick=\"drawSketch('19');\">\n",
       "    draw()\n",
       "  </button>\n",
       "</div>\n",
       "<b>Sketch #19 state:</b> <span id=\"state_19\">Loading...</span><br/>\n",
       "<script>\n",
       "\n",
       "function change_button(button, disable) {\n",
       "    button.disabled = disable;\n",
       "    if (disable) {\n",
       "        button.style.color = \"grey\";\n",
       "    } else {\n",
       "        button.style.color = \"black\";\n",
       "    }\n",
       "}\n",
       "\n",
       "function startSketch(id) {\n",
       "    switchSketchState(id, true);\n",
       "}\n",
       "\n",
       "function pauseSketch(id) {\n",
       "    switchSketchState(id, false);\n",
       "}\n",
       "\n",
       "function drawSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Drawing...\";\n",
       "            try {\n",
       "                processingInstance.redraw();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Drawing... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No drawing() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function setupSketch(id) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (processingInstance != undefined) {\n",
       "        if (processingInstance.setup != undefined) {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"Setting up...\";\n",
       "            try {\n",
       "                processingInstance.setup();\n",
       "                document.getElementById(\"state_\" + id).innerHTML = \"Setting up... done! Paused.\";\n",
       "                document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "            } catch (e) {\n",
       "                processingInstance.println(e.toString());\n",
       "                document.getElementById(\"state_\" + id).innerHTML = e.toString();\n",
       "                document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "            }\n",
       "        } else {\n",
       "            document.getElementById(\"state_\" + id).innerHTML = \"No setup() function. Paused.\";\n",
       "            document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Error.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"red\";\n",
       "    }\n",
       "    change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "    change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "    change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "    change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "}\n",
       "\n",
       "function switchSketchState(id, on) {\n",
       "    var processingInstance = Processing.getInstanceById(\"canvas_\" + id);\n",
       "    if (on) {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Running...\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"green\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id),  true);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), true);\n",
       "        processingInstance.loop();  // call Processing loop() function\n",
       "    } else {\n",
       "        document.getElementById(\"state_\" + id).innerHTML = \"Paused.\";\n",
       "        document.getElementById(\"state_\" + id).style.color = \"blue\";\n",
       "        change_button(document.getElementById(\"run_button_\" + id), processingInstance.draw == undefined);\n",
       "        change_button(document.getElementById(\"pause_button_\" + id), true);\n",
       "        change_button(document.getElementById(\"setup_button_\" + id), processingInstance.setup == undefined);\n",
       "        change_button(document.getElementById(\"draw_button_\" + id), processingInstance.draw == undefined);\n",
       "        processingInstance.noLoop(); // stop animation, call noLoop()\n",
       "    }\n",
       "}\n",
       "\n",
       "require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function () {\n",
       "    var processingCode = 'void setup() {\\n    size(400, 50);\\n}\\n\\nint minimum(int a, int b, int c) {\\n    if (a <= b && a <= c) {\\n        return a;\\n    } else if (b <= a && b <= c) {\\n        return b;\\n    } else {\\n        return c;\\n    }\\n}\\n\\nvoid draw() {\\n    background(255);\\n    fill(0);\\n    text(\"The minium of 3, 3, and 6 is:\" + minimum(3, 3, 6), 10, 20);\\n    noLoop();\\n}';\n",
       "    var cc;\n",
       "    var processingInstance;\n",
       "    var has_error = false;\n",
       "\n",
       "    try {\n",
       "        cc = Processing.compile(processingCode);\n",
       "    } catch (e) {\n",
       "        console.log(e);\n",
       "        cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "        document.getElementById(\"state_19\").innerHTML = e.toString();\n",
       "        document.getElementById(\"state_19\").style.color = \"red\";\n",
       "        has_error = true;\n",
       "    }\n",
       "    if (cc != undefined) {\n",
       "        try {\n",
       "            processingInstance = new Processing(\"canvas_19\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "        } catch (e) {\n",
       "            console.log(e);\n",
       "            cc = Processing.compile(\"println('\" + e.toString() + \"');\");\n",
       "            document.getElementById(\"state_19\").innerHTML = e.toString();\n",
       "            document.getElementById(\"state_19\").style.color = \"red\";\n",
       "            processingInstance = new Processing(\"canvas_19\", cc);\n",
       "            processingInstance.println = window.jyp_println\n",
       "            has_error = true;\n",
       "        }\n",
       "    }\n",
       "    if (processingInstance != undefined) {\n",
       "        setTimeout(function () {\n",
       "            // Canvas:\n",
       "            if (processingInstance.externals.context === undefined) {\n",
       "                document.getElementById(\"canvas_div_19\").style.display = \"none\";\n",
       "            }\n",
       "        }, 100);\n",
       "        // Controls:\n",
       "        if (!(processingInstance.isRunning() && processingInstance.draw != undefined)) {\n",
       "            document.getElementById(\"controls_div_19\").style.display = \"none\";\n",
       "        }\n",
       "        if (processingInstance.draw != undefined) {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_19\").innerHTML = \"Running...\";\n",
       "                document.getElementById(\"state_19\").style.color = \"green\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_19\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_19\"), false);\n",
       "            change_button(document.getElementById(\"setup_button_19\"),  true);\n",
       "            change_button(document.getElementById(\"draw_button_19\"), true);\n",
       "        } else {\n",
       "            if (!has_error) {\n",
       "                document.getElementById(\"state_19\").innerHTML = \"Done.\";\n",
       "                document.getElementById(\"state_19\").style.color = \"blue\";\n",
       "            }\n",
       "            change_button(document.getElementById(\"run_button_19\"), true);\n",
       "            change_button(document.getElementById(\"pause_button_19\"), true);\n",
       "            change_button(document.getElementById(\"setup_button_19\"),  processingInstance.setup == undefined);\n",
       "            change_button(document.getElementById(\"draw_button_19\"), true);\n",
       "        }\n",
       "    } else {\n",
       "        document.getElementById(\"canvas_div_19\").style.display = \"none\";\n",
       "        document.getElementById(\"controls_div_19\").style.display = \"none\";\n",
       "        if (!has_error) {\n",
       "            document.getElementById(\"state_19\").innerHTML = \"Error.\";\n",
       "            document.getElementById(\"state_19\").style.color = \"red\";\n",
       "        }\n",
       "        change_button(document.getElementById(\"run_button_19\"), true);\n",
       "        change_button(document.getElementById(\"pause_button_19\"), true);\n",
       "        change_button(document.getElementById(\"setup_button_19\"),  true);\n",
       "        change_button(document.getElementById(\"draw_button_19\"), true);\n",
       "    }\n",
       "});\n",
       "\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "void setup() {\n",
    "    size(400, 50);\n",
    "}\n",
    "\n",
    "int minimum(int a, int b, int c) {\n",
    "    if (a <= b && a <= c) {\n",
    "        return a;\n",
    "    } else if (b <= a && b <= c) {\n",
    "        return b;\n",
    "    } else {\n",
    "        return c;\n",
    "    }\n",
    "}\n",
    "\n",
    "void draw() {\n",
    "    background(255);\n",
    "    fill(0);\n",
    "    text(\"The minium of 3, 3, and 6 is:\" + minimum(3, 3, 6), 10, 20);\n",
    "    noLoop();\n",
    "}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Calysto Processing",
   "language": "java",
   "name": "calysto_processing"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "text/x-java",
    "version": 2
   },
   "file_extension": ".java",
   "mimetype": "text/x-java",
   "name": "java"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}